<template>
  <Radio v-bind="$attrs" v-on="$listeners">
    <template #icon="{ checked }">
      <div class="flex items-center justify-center h-full">
        <div class="ll-radio_icon" :class="{ 'll-radio_checked': checked }">
          <div v-if="checked" class="ll-radio_checked_inner"></div>
        </div>
      </div>
    </template>
    <span class="text-14px font-500" style="color: #333333">
      <slot></slot>
    </span>
  </Radio>
</template>

<script>
import { Radio } from "vant";
export default {
  components: {
    Radio,
  },
};
</script>

<style lang="scss" scoped>
.ll-radio_icon {
  @apply w-12px h-12px rounded-1 flex items-center justify-center leading-1em;
  border: 1px solid #cccccc;

  &.ll-radio_checked {
    border: 1px solid #1d6fe9;
  }
  .ll-radio_checked_inner {
    @apply w-6px h-6px rounded-1;
    background-color: #1d6fe9;
  }
}
</style>
